import React from 'react'
import { styled } from '@material-ui/styles'
import Typography from '@material-ui/core/Typography'
import ButtonBase from '@material-ui/core/ButtonBase'
import { history } from 'umi';
import Skeleton from '@material-ui/lab/Skeleton';

const Root = styled('div')({
  display: 'flex',
  borderRadius: 8,
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'white',
  cursor: 'pointer',
  boxShadow: `0 3px 5px 2px rgba(0,0,0,0.13)`,
  transition: 'box-shadow 0.3s ease-in-out',
  position: 'relative',
  overflow: 'hidden',
  zIndex: 1,

  '& .icon': {
    width: 96,
    height: 96,
    margin: 10,
    marginBottom: 0,
    transition: `border 0.5s ease-in-out
      ,transform 0.5s ease-in-out`,
    zIndex: 0,
    borderRadius: 8
  },
  '& .title': {
    zIndex: 10,
    transition: `transform 0.5s ease-in-out
      ,color 0.5s ease-in-out`,
    color: 'black'
  },

  '& .overlay':{
    position: 'absolute',
    width: '100%',
    height: '100%',
    background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
    color: 'white',
    transform: 'translateY(102%)',
    transition: `transform 0.5s ease-in-out
      ,opacity 0.5s ease-in-out`,
    opacity: 0,

    display: 'flex',
    flexDirection: 'column-reverse',
    '& p': {
      marginBottom: 16,
      textAlign: 'center',
    }
  },

  '&:hover': {
    boxShadow: '5px 10px 15px 2px rgba(33, 203, 243, .3)',

    '& .icon': {
      transform: 'scale(0.5) translateY(-48px)',
    },
    '& .title': {
      transform: 'scale(0.9) translateY(-48px)',
      color: 'white',
    },
    '& .overlay':{
      opacity: 1,
      transform: 'translateY(0)',
    }
  }
})

interface IProps{
  id?: number
  icon?: string
  title?: string
  intro?: string
}

const ProjectItem: React.FC<IProps> = ({
  id, icon, title, intro
}) => {

  const handleClick = () => {
    id && history.push('/project/' + id);
  }

  return <Root>
    <div className="overlay">
      <Typography component="p" variant="body2">
        {intro || <Skeleton width="100%"/>}
      </Typography>
    </div>
    {
      icon ? (
        <img className="icon" src={icon}/>
      ) : (
        <Skeleton className="icon" variant="rect"/>
      )
    }
    
    <Typography className='title' variant="h6">
      {title || <Skeleton width={80}/>}
    </Typography>
    <ButtonBase 
        style={{
        position: 'absolute',
        left: 0,
        right: 0,
        width: '100%',
        height: '100%',
        zIndex: 99,
      }}
      onClick={handleClick}
    >
      <div></div>
    </ButtonBase>
  </Root>
}

export default ProjectItem